<template>
  <div class="container-fluid">
    <div class="container">
      <el-row :gutter="20">
        <el-col :span="3">
          <div class="margintop20">
            <h2 class="teacher">全部老师</h2>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="margintop20">
            <ul class="techear-title">
              <li
                v-for="(item,index) in titlelist"
                :key="item.id"
                :class="{active:num==index}"
                @click="getNum(index)"
              >{{item.title}}</li>
            </ul>
          </div>
        </el-col>
      </el-row>
      <div>
        <!-- 教师列表 -->
        <el-row :gutter="20">
          <el-col :span="6" v-for="(item,index) in teachers" :key="index">
            <!-- 名师列表 -->
            <div class="grid-content detail-list">
              <el-card
                :body-style="{ padding: '0px' }"
                shadow="always"
                style="border:none"
                class="elcard"
              >
                <div class="teacher-list">
                  <img :src="item.head_icon" class="image" />
                  <div class="teacher-info">
                    <p>{{item.real_name}}</p>
                    <el-rate v-model="item.star_num" disabled text-color="#ff9900" score-template="{item.star_num}"></el-rate>
                    <span>{{item.grade}}</span>
                    <p>开课:{{item.number}} 招生:{{item.student_number}}</p>
                  </div>
                </div>
                <p class="detailinfo">
                  简介：
                  <span v-if="item.describe==''">暂无</span>
                  <span v-else>{{item.describe|ellipsis}}</span>
                </p>
              </el-card>
              <el-card
                :body-style="{ padding: '0px' }"
                shadow="always"
                style="border:none"
                class="elcard2"
              >
                <div class="teacher-list">
                  <img :src="item.head_icon" class="image" />
                </div>
                <div class="teacher-info">
                  <p>{{item.real_name}}</p>
                  <el-rate
                    v-model="item.star_num"
                    disabled
                    text-color="#ff9900"
                    score-template="{item.star_num}"
                  ></el-rate>
                  <span>{{item.grade}}</span>
                  <p>开课：{{item.number}} 招生：{{item.student_number}}</p>
                </div>
                <div class="person-info" @click="teacherDetail(item.id,item.is_nature)">他的主页</div>
              </el-card>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <div class="paging">
              <el-pagination
                background
                layout="prev, pager, next"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page.sync="page"
                :page-size="20"
                :total="total"
              ></el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      titlelist: [
        { id: "0", title: "综合" },
        { id: "1", title: "人气" },
        { id: "2", title: "好评" }
      ],
      num: 0,
      page: "1",
      total: 1,
      teachers: []
    };
  },
  created() {
    this.teacherList();
  },
  filters: {
    ellipsis: function(value) {
      if (!value) return "";
      value = value.toString();
      if (value.length > 64) {
        return value.slice(0, 64) + "...";
      }
      return value;
    }
  },
  methods: {
    getNum(index) {
      this.num = index;
      this.teacherList();
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.page = val;
      this.teacherList();
      console.log(`当前页: ${val}`);
    },
    teacherList() {
      this.$axios
        .post("/teacher/List", {
          dns: "testwo.admin.longde999.cn",
          page: this.page,
          pagesize: 20,
          type: this.num
        })
        .then(res => {
          if (res.code == 200) {
            console.log(res);
            this.teachers = res.data;
            this.total = res.total;
          }
        });
    },
    // 教师详情
    teacherDetail(val,nature) {
      this.$router.push("teacher/teacherDetail?id=" + val+'&natrue='+nature);
    }
  }
};
</script>

<style scoped lang='less'>
.teacher {
  line-height: 40px;
  text-align: center;
  background: url("../../assets/image/teacher/topbg.png") 100% 100% no-repeat;
  background-size: 100% 100%;
  font-size: 24px;
  color: #000033;
}
.techear-title {
  display: inline-table;
  li {
    float: left;
    color: #666;
    cursor: pointer;
    padding: 2px 10px;
    margin: 10px 8px;
    border: 1px solid #666;
  }
  .active {
    color: #27a4fe;
    border: 1px solid #27a4fe;
  }
}
.margintop20 {
  margin-top: 20px;
}
.elcard {
  min-height: 390px;
}
// 教师列表
.detail-list {
  position: relative;
  margin-bottom: 20px;
  border-bottom: 1px solid #b2d7f2a3;
  cursor: pointer;
  &:hover .elcard2 {
    opacity: 1;
    background-color: rgba(255, 255, 255, 1);
  }
  .elcard2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 390px;
    position: absolute;
    top: 0;
    left: 0;
    overflow: auto;
    z-index: 9999;
    transition: all 0.5s ease;
    opacity: 0;
    background-color: rgba(255, 255, 255, 1);
    background-color: rgba(0, 0, 0, 0.1);
    text-align: center;
    .teacher-info {
    display: inline-block;
    line-height: 22px;
    color: #444;
    word-spacing: 8px;
    vertical-align: top;
    margin-top: 20px;
    }
    .person-info {
      width: 68px;
      height: 26px;
      line-height: 26px;
      background: #27a4fe;
      color: #fff;
      font-size: 14px;
      margin: 10px auto 16px;
    }
  }
}
.teacher-list {
  margin-top: 100px;
  width: 280px;
  height: 120px;
  background: url("../../assets/image/teacher/teacherbg.png") center/cover
    no-repeat;
  background-size: 100% 100%;
  img {
    width: 147px;
    height: 200px;
    margin-top: -80px;
    vertical-align: bottom;
  }
  .teacher-info {
    display: inline-block;
    line-height: 22px;
    color: #fff;
    word-spacing: 8px;
    vertical-align: top;
    margin-top: 20px;
  }
}
.detailinfo {
  line-height: 28px;
  padding: 12px 12px 20px;
  color: #4d555d;
  vertical-align: bottom;
}
.paging{
  margin:40px auto;
  text-align: center;
}
</style>